<template>
	<view id="detail">
		<view class="nav ctt-info" >
			<view v-for="(item,index) in navTitle" :class="currentIndex === index ? 'active' : ''" @click="navClick(index)">{{item}}</view>
		</view>
		
		<view class="content" >
			<swiper class="ctt-info" indicator-dots circular autoplay interval="3000" indicator-color="#fff" indicator-active-color="#ff0000">
				<swiper-item v-for="item in topImages" >
					<image :src="item" mode="widthFix"></image>
					<!-- <view>1</view> -->
				</swiper-item>
			</swiper>
			
			<detail-base-info class="ctt-info" :goods="goods"></detail-base-info>
			<detail-shop-info  class="ctt-info" :shop="shop"></detail-shop-info>
			<detail-goods-info class="ctt-info" :detail-info="detailInfo" @imgGoodsInfoLoad="imgGoodsInfoLoad"></detail-goods-info>
			<detail-goods-param  class="ctt-info" :param-info="paramInfo" ref="goodsParam"></detail-goods-param>
			<detail-goods-comment class="ctt-info" :comment-info="commentInfo" ref="goodsComment"></detail-goods-comment>
			<goods-list :goods="recommend" ref="goodsList" class="good-list"></goods-list>
		
		</view>
			<detail-bottom-bar @addToCart="addToCart"></detail-bottom-bar>
	
		<back-top v-show="isShowBackTop"  @click.native="backTopClick"></back-top>
		
		<view class="show-box" v-show="show">{{message}}</view>
	</view>

</template>

<script>
	import { Goods, Shop, GoodsParam } from '../../network/detail.js'
	import DetailBaseInfo from './detailComps/DetailBaseInfo.vue'
	import DetailShopInfo from './detailComps/DetailShopInfo.vue'
	import DetailGoodsInfo from './detailComps/DetailGoodsInfo.vue'
	import DetailGoodsParam from './detailComps/DetailGoodsParam.vue'
	import DetailGoodsComment from './detailComps/DetailGoodsComment.vue'
	import DetailBottomBar from './detailComps/DetailBottomBar.vue'
	
	import GoodsList from '../../components/goodsList/GoodsList.vue'
	import BackTop from '../../components/backTop/BackTop'
	
	export default {
		data() {
			return {
				navTitle: ['商品', '参数', '评论', '推荐'],
				topImages: [],
				iid: null,
				goods: {},
				shop: {},
				detailInfo: {},
				paramInfo: {},
				commentInfo:{},
				recommend: [],
				currentIndex: 0,
				navTop: [],
				isShowBackTop:false,
				message: '',
				show: false
			}
		},
		components:{
			DetailBaseInfo,
			DetailShopInfo,
			DetailGoodsInfo,
			DetailGoodsParam,
			DetailGoodsComment,
			DetailBottomBar,
			GoodsList,
			BackTop
		},
		onLoad(options) {
			this.iid = options.id
			// console.log(options.id)
			this.getDetail(options.id)
			this.getRecommend()
			
		},
	// 	onReady(){
	// 		this.navTop.push(0)
	
	// 		this.navTop.push(this.$refs.goodsParam.$el.offsetTop)
	// 		this.navTop.push(this.$refs.goodsComment.$el.offsetTop)
	// 		this.navTop.push(this.$refs.goodsList.$el.offsetTop)
	// 		// console.log(this.$refs.goodsParam)
	// 		console.log(this.navTop)
	// 	},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getDetail(this.iid)
				uni.stopPullDownRefresh();
			},2000)
		},
		onPageScroll(Object){
			Object.scrollTop > 1000 ? this.isShowBackTop = true : this.isShowBackTop = false
		},
		methods: {
			// 通过iid请求详情页的数据
			getDetail(iid){
				// uni.$on('postPrama',(data) => {
				// 	console.log(data.iid)
					this.$myRequest({
						url:'/detail',
						data: {iid}
					}).then(res => {
						const data = res.data.result
						console.log(data)
						 this.topImages = data.itemInfo.topImages
						 // this.topImages.push(...data.result.itemInfo.topImages)
						 console.log(this.topImages)
						 
						 //获取商品信息
						 this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services )
						 console.log(this.goods)
						 
						 //获取商家信息
						 this.shop= new Shop(data.shopInfo)
						 console.log(this.shop)
						 
						 //获取商品详细信息
						 this.detailInfo = data.detailInfo
						 
						 //获取商品的参数
						 this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
						 
						 //获取商品的评价信息
						 if(data.rate.cRate !== 0){
						   this.commentInfo = data.rate.list[0]
						 }
					})		
			},
	
			//获取推荐商品列表
			getRecommend(){
				this.$myRequest({
					url: '/recommend'
				}).then(res => {
					this.recommend = res.data.data.list
					console.log(this.recommend)
				})
			},
			imgGoodsInfoLoad(){
						this.navTop.push(0)
						this.navTop.push(this.$refs.goodsParam.$el.offsetTop)
						this.navTop.push(this.$refs.goodsComment.$el.offsetTop)
						this.navTop.push(this.$refs.goodsList.$el.offsetTop)
						console.log(this.navTop)
			},
			navClick(index){
				this.currentIndex = index
					// console.log(this.$refs.goodsParam.$el.offsetTop)
				uni.pageScrollTo({
					scrollTop:this.navTop[index],
					duration:500
				})
			},
			backTopClick(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			},
			addToCart(){
				console.log('点击加入购物车')
				//获取购物车需要展示的信息
				const product = {}
				product.image = this.topImages[0]
				product.title = this.goods.title
				product.desc = this.goods.desc
				product.price = this.goods.realPrice
				product.iid = this.iid
				console.log(product)
				//将商品加入到购物车中
				this.$store.dispatch('addCart',product).then(res => {
				  this.message = res
				  this.show = true
				  setTimeout(() => {
				    this.show = false
						console.log(this.message)
				    this.message = ''
				  },1500)
				})
			}
	
	
		}
	}
</script>

<style lang="scss">
	#detail{
		position: relative;
		.nav{
			display: flex;
			text-align: center;
			height: 90rpx;
			line-height: 90rpx;
			color: #666666;
			background-color: #fff;
			position: fixed;
			left: 0;
			right: 0;
			top: 44px;
			z-index: 99;
			font-size: 32rpx;
			view{
				flex: 1;
			}
		}
		.content{
			position: relative;
			top: 44px;
			left: 0;
			right: 0;	
		
			.good-list{
				position: relative;
				// top:0;
				bottom: 50px;
				left: 0;
				right: 0;
			}
		}
		
		swiper{
			width: 750rpx;
			height: 600rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.active{
		color: $high-color;
	}
		
		.ctt-info{
			position: relative;
			bottom: 50px;
		}
		
		.show-box{
			position: fixed;
			top: 50%;
			left: 50%;
			padding: 8px 10px;
			transform: translate(-50%, -50%);
			color: #fff;
			background-color: rgba(0,0,0,.3);
		}
</style>
